<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script src="../vue.js"></script>
  </head>

  <body>
    <div id="app">
      <h1>vm实例的模板</h1>
      <hr />
      <!-- 组件的使用,直接使用标签的形式即可,单标签或者双标签都可以 -->
      <App></App>
    </div>
    <script>
      Vue.config.productionTip = false;
      const Header = Vue.extend({
        name: "Header",
        template: `<h2>Header</h2>`,
      });

      //1.创建一个App组件(组件名首字母大写)
      const App = Vue.extend({
        name: "App",
        data() {
          return {
            count: 0,
          };
        },
        components: {
          Header,
        },
        template: `<div>APP组件<span>{{count}}</span><Header/></div>`,
      });

      const vm = new Vue({
        el: "#app",
        //如果想在组件中或者vm实例中使用别的组件,请当前组件或者实例中先注册组件,然后再去当前组件或者实例模板中使用
        data() {
          return {};
        },
        //2.使用component注册组件
        components: {
          App: App,
        },
      });
    </script>
  </body>
</html>
